<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>

<link rel="stylesheet" href="artDialog-master/css/ui-dialog.css"/>
<link rel="stylesheet" href="artDialogExtend.css">


<script src="jquery.min.js"></script>

<script src="artDialog-master/dist/dialog-plus.js"></script>    
<script src="artDialogExtend.js"></script>    
<script src="jquery-validation/jquery-validation-1.15.0/dist/jquery.validate.js"></script>

<link rel="stylesheet" type="text/css" href="darktooltip-master/dist/darktooltip.css">
<script type="text/javascript" src="darktooltip-master/dist/jquery.darktooltip.js"></script>
<script src="jquery-submit2.js"></script>        

</head>

<body>
<pre>
实现功能：
1、根据元素的属性进行 弹框
2、根据元素的属性进行 表单 验证提交，并对返回结果进行 响应

引用的样式脚本：
jquery.min.js

artDialog-master/css/ui-dialog.css
artDialog-master/dist/dialog-plus.js
artDialogExtend.css
artDialogExtend.js

darktooltip-master/dist/darktooltip.css
darktooltip-master/dist/jquery.darktooltip.js

jquery-validation/jquery-validation-1.15.0/dist/jquery.validate.js

jquery-submit2.js


元素选择器说明：
如果元素选择器 以 css: 开头，则是相对 选择器，否则为 绝对选择器，也就是通常理解的选择器

<b style="color:green;">一、根据元素的属性进行 弹框</b>
    通过扩展方法给JQuery元素扩展了zdialog方法，例如
    $('#serdia').zdialog();
    
    <b>方式一：</b>
    $("css selecotr").zdialog(closeCallback)
    被弹出的元素，会随着弹出框的释放而释放
    参数说明：
    closeCallback：窗口关闭的回调函数
    	函数的this 上下文是   ajaxDialog 对象
        参数1：caller 弹出窗口的调用者
        参数2：弹出框 dialgo对象 （artDialog）
     caller 相关属性说明（caller，调用元素）：     
     dialog-anchor：弹出框需要停靠在 caller 元素的下方
     dialog-modal: 弹出框，是否需要遮罩整个页面，默认遮罩 ，当值为false时，不遮罩
     dialog-element：需要弹出显示的元素。仅仅是弹出显示
     	--caller同时有属性 dialog-element  与   dialog-action，优先调用 dialog-element
        --相对元素选择器 的参考对象为 caller 
        --title  element元素的属性title将作为弹出框的标题显示
      
     <b>方式二：</b>
     测试这个，需要部署在 web服务器访问
     dialog-action：需要弹出显示的 url（不是以 iframe 显示，仅仅是把 返回的html，显示到弹出框内容区）
     dialog-param：请求 dialog-action 携带的参数

	     --title  返回的html，的首个，有title属性的元素，的属性title将作为弹出框的标题显示
     
     dialogReady：请求返回的，回调事件。请求的html内容，可以给document 绑定事件 dialogReady 。在内容显示后，立即进行出发 事件
     	事件绑定函数，有一个参数 为 包含html内容的div元素。div元素是从 artDialog元素提出而来
     	例如：
         $(document).one("dialogReady", function (wrap) {
            debugger;
        });
    
</pre>

<div class="wrap" style="border:1px solid black; margin:10px;">
    
    <span onclick="$(this).zdialog();" dialog-element="#profile1" >方式一，绝对css选择器（普通的css选择器）</span><br/>
    <span onclick="$(this).zdialog();" dialog-element="css:.wrap .block" dialog-anchor="true">方式一，相对css选择器</span><br/>
    <span onclick="$(this).zdialog();" dialog-element="css:.wrap .block" dialog-anchor="true">方式一停靠</span><br/>
    <span onclick="$(this).zdialog();" dialog-element="css:.wrap .block" dialog-modal="false">方式一 ，不遮罩</span><br/>
    
    <span id="serdia" onclick="$(this).zdialog()" dialog-action="test.txt" dialog-param="1=1">方式二，弹框Server</span><br/>
    <div style="width:100px; height:100px; background-color:#C9F;" id="profile2" class="block">ID=profile2，<br/>  内层Block</div>
</div>

<div style="width:100px; height:100px; background-color:#6C6;" id="profile1" class="block">ID=profile1 ，<br/> 外层Block</div>

<pre>
<b style="color:green;">二、根据元素的属性进行 表单 验证提交，并对返回结果进行 响应</b>
	通过扩展方法给JQuery元素扩展了ajaxSubmitForm方法，
     在提交之前，通过  jquery.validate 进行表单验证（不是JQuery提供的验证，这是两个不同的验证库），并通过darktooltip显示错误消息。
    例如
    $('#loginForm').ajaxSubmitForm(validate, callback, caller)
    参数说明：
    	validate:如果传递一个函数，将使用此函数进行验证表单，而忽略自带的验证，同时验证消息显示，也得自己处理。函数返回true，继续提交，返回false，终止执行
        data-msg-gravity：错误提示信息的 方位，默认可以不写，将自动判断显示。可以写的值：south | west | north | east
       
    默认的表单验证，暂时仅支持form的表单验证
    <b>提交的action注意点：</b>
    dialog-action: 如果caller有dialog-action属性，则忽略form的action 。 否则，使用form的action 。 两者必有其一
    
    <b>提交前的提示确认设置：</b>
    dialog-actionTip： caller 或者 form 的 属性值，作为提交前的确认提示
    
    <b>target注意点：</b>
    表单提交后的target指向。 
    dialog-target:如果caller有dialog-target属性，则忽略form的target。否则使用form 的target。 如果都没有，则判断相应是否为json数据，进行处理
        
     <b>form的enctype</b>
     如果form  的 enctype 属性值为 multipart/form-data ，则使用原生的post提交表单
     如果form 的 method 属性值 post，则使用JQuery的AjaxPost提交
     否则，使用JQuery的AjaxGet提交

	 <b>响应后需要进行回调的情况     </b>     
     在相应为json情况下，如果res 包含 Refresh 则，获取 caller 或者 wincaller 的 dialog-reFreshBtn 属性值 对应的 元素，出发其 click事件
     有多个元素的情况，每个间隔10*index 依次 触发
     dialog-reFreshBtn：
     
     注意：对于弹出框后的提交， 弹出框的表单提交后，先判断弹出框的提交按钮，是否有属性 dialog-reFreshBtn ，如果没有，会判断弹出框的caller，是否有 dialog-reFreshBtn 属性。 从而进行调用元素的click事件
     <b>响应为json的情况，关于json的定义：</b>
     例如：
     {
     	"res":"alert",
        "tip":"提示信息"
     }
     说明：
    
    
    alert：弹出tip
    fail：弹出tip值，同alert    
    error：弹出tip值，同alert    
    ok：关闭当前的dialog对话框
    
    alertOk:弹出tip，并且关闭当前的dialog对话框	
    alertRefresh:弹出tip值，并调用当前dialog窗口的caller的dialog-reFreshBtn属性，指向元素的click事件
    alertOKRefresh:弹出tip值，并关闭窗口，而且，调用dialog的caller的dialog-reFreshBtn指向元素的click事件
    OkRefresh:关闭窗口，而且，调用dialog的caller的dialog-reFreshBtn指向元素的click事件
    
    exists：表单元素已经存在。
    	--（或者 notbenull） 验证是否字段存在，并标识field为error，同时在field提示tip
    notbenull:同 exists
    

</pre>
<div class="form" action="testAjaxSubmitForm.txt" method="get" class="form2">
<form action="testAjaxSubmitForm.txt" method="get" class="form" id="dialogWithSubmit2" style="border:1px solid black; margin:10px;padding:10px;">
	详细的验证规则请参考官网：https://jqueryvalidation.org/documentation/
    <br/>
  
    <input type="text" name="UserName" required="required" maxlength="12"  minlength="5" data-msg-required="请输入用户名" data-msg-gravity="sourth	"/>
    <input type="text" name="Pwd" required="required"/>
    <input type="text" name="年龄" required="required"/>
    <input type="button" value="验证提交" onclick="$(this).parents('form:first').ajaxSubmitForm(null,null,this)"/>
    <br/>
    <input type="button" value="提交UserName已存在" dialog-action="UserNameExists.txt" onclick="$(this).parents('.form:first').ajaxSubmitForm(null,null,this)"/>
    <input type="button" value="提交后刷新" dialog-action="alertRefresh.txt" onclick="$(this).parents('.form:first').ajaxSubmitForm(null,null,this)" dialog-reFreshBtn="css:.form .refreshBtn"/>
    <input type="button" value="提交后刷新" style="display:none" style="display:none" onclick="alert('提交后刷新')" class="refreshBtn"/>
    <input type="button" value="弹框后，提交。 提交后，调用wincaller的刷新" onclick=" $(this).parents('.form:first').ajaxSubmitForm(null,null,this)" dialog-action="alertOKRefresh.txt" id="dialogSubmit"/>
    
        <input type="button" value="弹框后，提交。提交后，调用自己的刷新" onclick=" $(this).parents('.form:first').ajaxSubmitForm(null,null,this)" dialog-action="alertOKRefresh.txt" id="dialogSubmit" dialog-reFreshBtn="css:#b"/>

    

</form>
</div>

<input type="button" value="弹出窗口，然后提交，后进行回调 2 " dialog-element="#dialogWithSubmit2"  onclick="$(this).zdialog(dialogCloseCallback)" dialog-reFreshBtn="#a"/>
<span id="a" onclick="$(this).css('color','red')">#a</span>
        <span id="b" onclick="$(this).css('color','blue')">弹框后自己的刷新</span>
<input type="button" value="弹出窗口，关闭后，回调" dialog-element="#dialogWithSubmit"  onclick="$(this).zdialog(dialogCloseCallback)" />
<div id="dialogWithSubmit" style="width:100px; height:100px; background-color:blue;">

</div>
<script>
//this 指向 SubmitForm3实例
//form 提交的表单
//btn  caller
function validateForm(form,btn){
	debugger;
}
//返回值为json，第一个参数为json对象（如果需要获取原始的数据，需要从event自行获取）
//返回值为html，第一个参数为html字符串
function comitCallback(json, form, caller, event, request, settings){

}
function dialogCloseCallback(){
alert('回调');	
}
</script>
<form id="testForm"></form>
</body>
</html>
